<!DOCTYPE html>
<html lang="is">
<head>
    <meta charset="utf-8" />
    <title>School App</title>
    <link href="Content/Site.css" type="text/css" rel="stylesheet">
	<link rel="stylesheet" href="Content/default/default.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="Content/nivo-slider.css" type="text/css" media="screen" />
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript" ></script>
    <script src="Scripts/kinetic-v3.9.4.js" type="text/javascript" ></script>
	<script src="Scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>
    <script>
        function isNearOutline(taska, goal) {
            var a = taska;
            var o = goal;
            if(a.attrs.x > o.x - 70 && a.attrs.x < o.x + 70 && a.attrs.y > o.y - 110 && a.attrs.y < o.y + 110) {
                return true;
            }
            else {
                return false;
            }
        }
		function showSubpage(pageName) {
			hideAllSubpages();
            var vid = document.getElementById('video');
			if (pageName === "leikir"){
				    $("#games").fadeIn("slow");
                    vid.pause();
            }
			else if (pageName === "myndir"){
				    $("#pictures").fadeIn("slow");
                    vid.pause();
            }
			else if (pageName === "videos"){
                    $("#videos").fadeIn("slow");
                    vid.play();
            }
		}
		function hideAllSubpages() {
			$(".mainSub").fadeOut("slow");
		}
        window.onload = function() {
            var stage = new Kinetic.Stage({
                container: "roomContainer",
                width: 1000,
                height: 750
            });
            var layer = new Kinetic.Layer();
            var goals = {
                hurd: {
                    name: "blueprint", x: 830, y : 275
                },
				leikir: {
                    name: "leikir", x: 90, y : 530
                },
				myndir: {
                    name: "myndir", x: 330, y : 530
                },
				videos: {
                    name: "videos", x: 565, y : 530
                },
                hljod: {
                    name: "hljod", x : 825, y : 110
                }

            };

			// Sk�lataska draggable
            var skolataskaImg = new Image();
            skolataskaImg.onload = function() {
                var skolataska = new Kinetic.Image({
                    image: skolataskaImg,
                    x: 820,
                    y: 550,
                    draggable: true
                });

                layer.add(skolataska);
                stage.add(layer);

                skolataska.on("dragstart", function() {
                    skolataska.moveToTop();
                    layer.draw();
                });

                // add cursor styling
                skolataska.on("mouseover", function() {
                    layer.draw();
                    document.body.style.cursor = "pointer";
                });
                skolataska.on("mouseout", function() {
                    layer.draw();
                    document.body.style.cursor = "default";
                });
                skolataska.on("dragend", function() {
                    layer.draw();
                    for (var key in goals) {
                        if(isNearOutline(skolataska, goals[key])) {
							var currentGoal = goals[key];
							if (currentGoal.name === "blueprint") {
								window.location.href = "blueprint.html"; }
                            else if (currentGoal.name == 'hljod') {
                                var audioElem = document.getElementById('audioPlayer');
                                audioElem.play(); }
                            else {
								showSubpage(currentGoal.name);
                            }
                        }
                    }
                });
            };
            skolataskaImg.src = "Images/skolataska.png";
			
			// Hur� drop
			var doorImg = new Image();
			doorImg.onload = function() {
				var doorMynd = new Kinetic.Image({
					image: doorImg,
					x: 830,
					y: 275,
					draggable: false
				});

				layer.add(doorMynd);
				stage.add(layer);
			};
			doorImg.src = "Images/door.png";
			
			// Leikir drop
			var leikirImg = new Image();
			leikirImg.onload = function() {
				var leikirMynd = new Kinetic.Image({
					image: leikirImg,
					x: 90,
					y: 530,
					draggable: false
				});

				layer.add(leikirMynd);
				stage.add(layer);
			};
			leikirImg.src = "Images/Leikir.png";
			
			// Myndir drop
			var myndirImg = new Image();
			myndirImg.onload = function() {
				var myndirMynd = new Kinetic.Image({
					image: myndirImg,
					x: 330,
					y: 530,
					draggable: false
				});

				layer.add(myndirMynd);
				stage.add(layer);
			};
			myndirImg.src = "Images/Myndir.png";
			
			// Video drop
			var videosImg = new Image();
			videosImg.onload = function() {
				var videosMynd = new Kinetic.Image({
					image: videosImg,
					x: 565,
					y: 530,
					draggable: false
				});

				layer.add(videosMynd);
				stage.add(layer);
			};
			videosImg.src = "Images/Video.png";

            // Audio drop
            var audioImg = new Image();
            audioImg.onload = function() {
                var audioMynd = new Kinetic.Image({
                    image: audioImg,
                    x: 825,
                    y: 110,
                    draggable: false
                });

                layer.add(audioMynd);
                stage.add(layer);
            };
            audioImg.src = "Images/k-mix-icon.png";
        };
    </script>
</head>
<body>
	<div class="leftContainer">
		<div id="roomContainer">
			<div id="modalWindow">
			
				<section id="modalWindowHeader">
					<div id="modalWindowIcon"><img src="Images/MyndmenntIcon.png" alt="" /></div>
					<div id="modalWindowTitle">Myndmennt</div>
				</section>
				
				<section id="modalWindowMain">
				
					<div id="pictures" class="mainSub slider-wrapper theme-default">
						<div class="ribbon"></div>
						<div id="slider" class="nivoSlider">
							<img src="Images/Korpuskoli/W700px/1.jpg" alt="" />
							<img src="Images/Korpuskoli/W700px/2.jpg" alt="" />
							<img src="Images/Korpuskoli/W700px/3.jpg" alt="" />
						</div>
						<div id="htmlcaption" class="nivo-html-caption">
							<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
						</div>
					</div>
					
					<div id="games" class="mainSub">
					</div>
					
					<div id="videos" class="mainSub">
                        <video id="video" width="700" height="400" controls="controls">
                            <source src="korpuskoli.mov" />
                            Your browser does not support the video tag.
                        </video>
					</div>
				</section>
				
				<div id="bottomContainer">
					<section id="modalWindowBottomSection">
						<div class="modalWindowSmallBox marginRight"></div>
						<div class="modalWindowSmallBox marginRight"></div>
						<div class="modalWindowSmallBox"></div>
					</section>
				</div>
				
			</div> <!-- modalWindow ends -->
		</div> <!-- roomContainer ends -->
	</div> <!-- centerContainer ends -->
    <div id="player">
        <audio id="audioPlayer">
            <source id="velkomin" src="Audio/MYNDMENT-UT.mp3" type="audio/mpeg" />
        </audio>
    </div>
</body>
</html>

<script type="text/javascript">
	$(document).ready(function () {
		$("#roomContainer").fadeIn("slow");
	});

	$(window).load(function () {
		$('#slider').nivoSlider({
			effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
			slices: 15, // For slice animations
			boxCols: 8, // For box animations
			boxRows: 4, // For box animations
			animSpeed: 500, // Slide transition speed
			pauseTime: 3000, // How long each slide will show
			startSlide: 0, // Set starting Slide (0 index)
			directionNav: true, // Next & Prev navigation
			directionNavHide: false, // Only show on hover
			controlNav: false, // 1,2,3... navigation
			controlNavThumbs: false, // Use thumbnails for Control Nav
			controlNavThumbsFromRel: false, // Use image rel for thumbs
			controlNavThumbsSearch: '.jpg', // Replace this with...
			controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
			keyboardNav: true, // Use left & right arrows
			pauseOnHover: true, // Stop animation while hovering
			manualAdvance: false, // Force manual transitions
			captionOpacity: 0.8, // Universal caption opacity
			prevText: 'Prev', // Prev directionNav text
			nextText: 'Next', // Next directionNav text
			randomStart: false, // Start on a random slide
			beforeChange: function(){}, // Triggers before a slide transition
			afterChange: function(){}, // Triggers after a slide transition
			slideshowEnd: function(){}, // Triggers after all slides have been shown
			lastSlide: function(){}, // Triggers when last slide is shown
			afterLoad: function(){} // Triggers when slider has loaded
		});
	});
</script>











